<template>
  <div>
    <header-nav></header-nav>
    <div class="rankingtop">
      <div class="ranking">
        <div class="rankings">
          <div v-for="item in playList" :key="item.id">
            <router-link :to="'/ranking/rankinglist?id=' + item.id">
              <img :src="item.coverImgUrl"
            /></router-link>
            <ul>
              <li class="lis">榜单<i class="iconfont icon-xiangyou1"></i></li>
              <li
                v-for="(key, index) in item.tracks"
                :key="key.id"
                v-show="index < 3"
              >
                {{ index + 1 }}.{{ key.name }} - {{ key.ar[0].name }}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <van-tabbar active-color="#ee0a24" inactive-color="#ccc" v-model="active">
        <van-tabbar-item
          class="iconfont icon-wangyiyunyinle1-copy"
          @click="recommend"
          >首页</van-tabbar-item
        >
        <van-tabbar-item class="iconfont icon-huatong" @click="singers"
          >歌手</van-tabbar-item
        >
        <van-tabbar-item class="iconfont icon-peoples" @click="podcast"
          >关注</van-tabbar-item
        >
        <van-tabbar-item class="iconfont icon-paihang" @click="ranking"
          >榜单</van-tabbar-item
        >
        <van-tabbar-item
          class="iconfont icon-shejiao-yinle-copy"
          @click="$router.push('/userInfo').catch(() => {})"
          >我的</van-tabbar-item
        >
      </van-tabbar>
    </div>
  </div>
</template>
<script>
import headerNav from "../components/headerNav.vue";
import {
  getToplist,
  getPlaylistDetail,
  getToplistArtist,
} from "../api/ranking";

export default {
  data() {
    return {
      playList: [],
      ToplistArtist: [],
      active: 3,
    };
  },
  beforeRouteEnter(to, from, next) {
    getToplist().then((data) => {
      next((vm) => vm.getPlaylistDetailFun(data.list));
    });
  },
  methods: {
    getPlaylistDetailFun(list) {
      for (let i = 0; i < list.length; i++) {
        let lists = list[i].id;
        getPlaylistDetail({ id: lists }).then((data) => {
          this.playList.push(data.playlist);
        });
      }
    },
    recommend() {
      this.$router.push("/recommend");
    },
    singers() {
      this.$router.push("/singer");
    },
    ranking() {
      this.$router.push("/ranking");
    },
    podcast() {
      this.$router.push("/podcast");
    },
  },
  created() {
    getToplistArtist().then((data) => {
      let artists = data.list.artists;
      for (let i = 0; i < artists.length; i++) {
        if (i < 10) {
          this.ToplistArtist.push(artists[i]);
        }
      }
    });
  },
  components: { headerNav },
};
</script>

<style lang="less">
.rankingtop {
  margin-top: 42px;
  overflow: hidden;
  background-color: #f2f3f4;
  padding-bottom: 42px;
  .ranking {
    width: 100%;
    height: 100vh;
    .rankings {
      width: 97%;
      margin: 0 auto;
      height: 80%;
      div {
        padding: 3px 0;
        height: 17.5%;
        border-bottom: 1px solid #e1e2e2;
        padding-right: 20px;
        background-color: #f2f3f4;
        a {
          img {
            border-radius: 5px;
            height: 100%;
            float: left;
            margin-right: 20px;
          }
        }
        ul {
          border-bottom: none;
          font-size: 12px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          li {
            margin: 5px 0px;
            i {
              font-size: 10px;
              margin: 0 5px;
            }
          }
          .lis {
            font-weight: bold;
          }
        }

        &:last-child {
          padding-bottom: 50px;
        }
      }
    }
  }
  .bottom {
    width: 100%;
    height: 30px;
    position: fixed;
    padding: 5px 0;
    left: 0px;
    bottom: 0px;
    z-index: 10 !important;
    background-color: white;
  }
}
</style>